<template>

	<view class="wrap">

		<view class="header">
			<text class="title">健康咨询</text>
			<view class="action-item search-input" @click="openMenu">
				<u-icon name="list" color="#000" size="40"></u-icon>
			</view>
		</view>

		<view class="search-bar">
			<input type="text" placeholder="你要了解什么" v-model="searchQuery" />
			<view class="action-item">
				<u-icon name="search" color="#666" size="24" @click="search"></u-icon>
			</view>
		</view>

		<view class="status-buttons">
			<button :class="{ active: currentStatus === 'all' }" @click="filterQuestions('all')">所有</button>
			<button :class="{ active: currentStatus === '0' }" @click="filterQuestions('0')">未回答</button>
			<button :class="{ active: currentStatus === '1' }" @click="filterQuestions('1')">已回答</button>
			<button :class="{ active: currentStatus === '2' }" @click="filterQuestions('2')">已解决</button>
			<button :class="{ active: currentStatus === '3' }" @click="filterQuestions('3')">已关闭</button>
		</view>

		<!-- 	搜索框 -->
		<!-- <uni-search-bar class="uni-mt-10" @confirm="search" placeholder="点击搜索姓名" :focus="false" v-model="searchValue"
			@input="input" @cancel="cancel" @clear="clear">
		</uni-search-bar> -->
		<!-- 	分割栏 菜单-->
		<!-- <view class="divider" />
		<uni-row class="menu" :width="nvueWidth">
			<uni-col :span="10" class="uni-mt-5">
				<button type="primary" size="mini" @click="add">新增</button>
			</uni-col>
		</uni-row> -->
		<!-- 	分割栏 -->
	<!-- 	<view class="divider" /> -->
		<view class="question-list">
				<view class="question-item" v-for="question in filteredQuestions" :key="question.id">
					<view class="status-and-user">
						<view :class="['status', statusClass[question.statusAsk]]">
							{{ statusText[question.statusAsk] || '状态未知' }}
						</view>
						<view class="user-info">
							<image class="avatar" :src="question.avatar || defaultAvatar" />
							<text class="user-name">{{ question.userName || '匿名' }}</text>
							<text class="ask-time">{{ getTimeDifference(question.createTime) }}</text>
						</view>
					</view>
					<view class="title">{{ question.title }}</view>
					<view class="tags" v-if="question.tags">
						<view class="tag" v-for="tag in question.tags.split(',')" :key="tag.trim()"
							@click="handleTagClick(tag.trim())">
							#{{ tag.trim() }}
						</view>
					</view>
				</view>
			</view>



		<!-- 	列表 -->
		<uni-section title="用户列表" type="line">
			<uni-collapse v-for="(item ,index) in carLicenseList" :key="index" accordion>
				<uni-collapse-item note="描述信息" :title="item.carUserName" showArrow :key="index"
					thumb="../static/user.png">
					<uni-row :gutter="10">
						<uni-col :span="5">
							<!-- <image class="image" src="../static/car.png"></image> -->
						</uni-col>
						<uni-col :span="11">
							<uni-row class="a">
								<uni-col :span="10">
									<span>车牌：</span>
								</uni-col>
								<uni-col :span="14">
									<uni-tag :text="item.carNumber" type="primary" />
								</uni-col>
							</uni-row>
							<uni-row class="b">
								<uni-col :span="10">
									<span>电话号码：</span>
								</uni-col>
								<uni-col :span="14">
									<uni-tag :text="item.phone" type="success" />
								</uni-col>
							</uni-row>
						</uni-col>
						<uni-col :span="7">
							<uni-row class="menuitem">
								<button type="primary" size="mini" plain="true" @click="edit(item)">修改</button>
							</uni-row>
							<uni-row class="menuitem">
								<button type="warn" size="mini" @click="handleDelete(item)">删除</button>
							</uni-row>
						</uni-col>
					</uni-row>
				</uni-collapse-item>
			</uni-collapse>
		</uni-section>
		<!-- 	触底显示加载状态 -->
		<uni-load-more :status="status"> </uni-load-more>
	</view>
</template>
<script>
	import {
		listAsk
	} from '@/api/system/ask'; // 更新为正确的导入路径
	export default {
		data() {
			return {
				currentStatus: 'all',
				pageNum: 1,
				pageSize: 6,
				questions: [],
				defaultAvatar: '/static/images/profile.png', // 设置默认头像 URL
				statusClass: {
				  0: 'status-unanswered',
				  1: 'status-answered',
				  2: 'status-resolved',
				  3: 'status-closed'
				},
				statusText: {
				  0: '未回答',
				  1: '已回答',
				  2: '已解决',
				  3: '已关闭'
				},
				loadMoreStatus: 'more', // 'more', 'loading', 'noMore'
				searchQuery: '',
				nvueWidth: 730,
				accordionVal: '1',
				searchValue: '',
				queryParams: {
					pageNum: 1,
					pageSize: 20,
					parkId: null,
					carUserName: ''

				},
				// carLicense列表数据
				carLicenseList: [],
				loading: false,
				status: "loading",
				// 总条数
				total: 0,

			}

		},
		computed: {
		  filteredQuestions() {
		    let filtered = this.questions;
		    if (this.currentStatus !== 'all') {
		      filtered = filtered.filter(question => question.statusAsk.toString() === this.currentStatus);
		    }
		    if (this.searchQuery) {
		      filtered = filtered.filter(question => question.title.includes(this.searchQuery));
		    }
		    return filtered;
		  },
		  hasMore() {
		    return this.loadMoreStatus === 'more';
		  },
		  loadingMore() {
		    return this.loadMoreStatus === 'loading';
		  }
		},
		//触底函数
		onReachBottom() {
			//判断 如果每页显示个数*总页数>返回的总数，则显示底部加载状态为没有更多数据了，否则显示转圈，正在加载
			if (this.queryParams.pageNum * this.queryParams.pageSize >= this.total) {
				this.status = "noMore"
				return;
			} else {
				this.status = "loading"
			}
			if (this.loading) return

			this.queryParams.pageNum += 1
			// console.log('我到地步了')
			this.getList()
		},
		// 上拉动态刷新函数
		onPullDownRefresh() {
			// 1，重置数据
			this.queryParams.pageNum = 1
			this.total = 0
			this.loading = false
			this.carLicenseList = []
			//2 发起请求
			this.getList(() => uni.stopPullDownRefresh())
		},
		//页面进来首先进行加载数据，调用searchList（）方法
		created() {
			this.searchList();
		},
		methods: {
			async filterQuestions(status) {
				this.currentStatus = status;
				this.pageNum = 1;
				console.log('当前状态:', this.currentStatus); // 调试信息
				await this.loadQuestions(this.pageNum);
			},
			/** 查询carLicense列表 */
			async getList(cb) {
				this.loading = true;
				listAsk(this.queryParams).then(response => {
					this.loading = false;
					cb && cb()
					//当前数据与后台传过来的数据进行合并
					this.carLicenseList = [...this.carLicenseList, ...response.rows];
					this.total = response.total;
				});
			},
			searchList() {
				this.loading = true;
				listAsk(this.queryParams).then(response => {
					this.loading = false;
					this.carLicenseList = [...this.carLicenseList, ...response.rows];
					this.total = response.total;
				});
			},
			//搜索框函数
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
				this.queryParams.carUserName = res.value
				this.queryParams.pageNum = 1;
				this.carLicenseList = []
				this.searchList()
				this.status = "noMore"

			},
			//搜索框动态搜索显示查到的列表
			input(res) {
				console.log('----input:', res)
				this.queryParams.carUserName = res
				this.queryParams.pageNum = 1
				this.total = 0
				this.carLicenseList = []
				this.loading = true
				this.status = "noMore"
				this.searchList()

			},
			//搜索框清空函数
			clear(res) {
				this.queryParams.carUserName = ''
				this.queryParams.pageNum = 1
				this.total = 0
				this.carLicenseList = []
				this.searchList()
				this.loading = false
			},
			//搜索框点击取消函数
			cancel(res) {
				// uni.showToast({
				// 	title: '点击取消，输入值为：' + res.value,
				// 	icon: 'none'
				// })
				this.queryParams.carUserName = ''
				this.queryParams.pageNum = 1
				this.total = 0
				this.carLicenseList = []
				this.getList()
			},

			//下面的方法为本程序的特有的逻辑代码，可忽略
			add() {
				this.$tab.navigateTo("/pages/car/addCar");
			},
			edit(item) {
				this.$tab.navigateTo("/pages/car/editCar?item=" + encodeURIComponent(JSON.stringify(item)));
			},

			/** 删除按钮操作 */
			handleDelete(item) {
				const id = item.id;
				this.$modal.confirm('是否确认删除姓名为"' + item.carUserName + '"的数据项？').then(function() {
					return delCarLicense(id);
				}).then(() => {
					this.$modal.msgSuccess("删除成功,请下拉刷新页面");
					this.onPullDownRefresh();
				}).catch(() => {});
			},
		}
	}
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 120vh;
		/* 确保容器占满视口高度 */
		background-color: #fff;
		overflow-y: auto;
		/* 允许滚动 */
	}

	.question-list {
		flex: 1;
		/* 填充剩余空间 */
		padding: 20px;
		overflow-y: auto;
		/* 允许滚动 */
		background: #fff;
		padding-bottom: 20px;
	}

	.question-item {
		padding-bottom: 20px;
		border-bottom: 1px solid #dadada;
		cursor: pointer;
		margin-top: 20px;
	}


	.tags {
		display: flex;
		flex-wrap: wrap;
		/* 使标签在空间不足时换行 */
		margin-top: 10px;
	}

	.tag {
		margin-right: 10px;
		font-size: 14px;
		color: #666;
		cursor: pointer;
		white-space: nowrap;
		/* 确保标签文字不会换行 */
	}

	.tag:last-child {
		margin-right: 0;
		/* 去掉最后一个标签的右边距 */
	}

	.wrap {
		padding: 0 10px 0 10px;
		background-color: #fff;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
		background-color: #fff;
		color: #fff;
		height: 100px;

	}

	.title {
		font-size: 24px;
		font-weight: bold;
	}

	.header {
		background-color: #fff;

		.title {
			color: #000;
			font-size: 40rpx;
			text-align: center;
			width: 100%;
		}
	}

	.menu-button {
		background: transparent;
		border: none;
		cursor: pointer;
	}

	.menu-button image {
		width: 24px;
		height: 24px;
	}

	.menu {
		font-size: 34px;
		color: #000;
		font-weight: bold;
	}

	.search-bar {
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 20px;
	}

	.search-bar input {
		flex: 1;
		border: none;
		background-color: #f3f3f3;
		padding: 20px;
		border-top-left-radius: 25px;
		border-bottom-left-radius: 25px;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}

	.search-bar .action-item {
		background-color: #f3f3f3;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
		border-top-right-radius: 25px;
		border-bottom-right-radius: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 8px 20px;
		height: 100%;
	}

	.search-bar button {
		background-color: transparent;
		border: none;
		cursor: pointer;
	}

	.search-bar button image {
		width: 24px;
		height: 24px;
	}

	.search {
		color: #676767;
		font-size: 24px;
	}

	.no-border::after {
		border: none;
	}

	.status-buttons {
		display: flex;
		justify-content: space-around;
		padding: 00px 0;
		background-color: #fff;
		border-top: 0px solid #ccc;
		/* 添加顶部边框 */
		border-bottom: 0px solid #ccc;
		/* 添加底部边框 */
		position: sticky;
		top: 0;
		z-index: 1;
		border: none;
		margin: 0 00 10px 0;
	}

	.status-buttons button::after {
		border: none;
	}

	.status-buttons button {
		background-color: #fff;
		border: 1px solid #fff;
		/* 添加按钮边框 */
		border-radius: 0px;
		/* 圆角边框 */
		padding: 0px 0px;
		padding: 5px 10px 5px 10px;
		font-size: 16px;
		cursor: pointer;
		/* width: 80px; */
		height: 30px;
		line-height: 20px;
		text-align: center;
	}

	.status-buttons button.active {
		background-color: #ddd;
		color: #444;
		border-radius: 15px;
		padding-left: 10px;
		padding-right: 10px;
	}

	.question-list {
		flex: 1;
		/* 使问题列表填充剩余空间 */
		padding: 20px;
		overflow-y: auto;
		background: #fff;
		/* 确保可以滑动 */
		padding-bottom: 20px;
	}

	.question-item {
		padding-bottom: 20px;
		border-bottom: 1px solid #dadada;
		cursor: pointer;
		margin-top: 20px;
	}

	.status-and-user {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.status {
		padding: 5px 10px;
		border-radius: 5px;
		font-size: 14px;
		/* color: #010101; */
		color: #666666;
		display: inline-block;
		margin-right: 10px;
	}

	.status-answered {
		background-color: #c2f7c2;
	}

	.status-unanswered {
		background-color: #febdc1;
	}

	.status-resolved {
		background-color: #c2e4f7;
	}

	.status-closed {
		background-color: #ccc;
	}

	.user-info {
		display: flex;
		align-items: center;
	}

	.avatar {
		width: 24px;
		height: 24px;
		border-radius: 50%;
		margin-right: 10px;
	}

	.user-name {
		font-size: 16px;
		color: #333;
		/* color: #666; */
		margin-right: 10px;
	}

	.ask-time {
		font-size: 14px;
		color: #666;
	}

	.title {
		font-size: 24px;
		font-weight: bold;
		color: #000;
		margin-top: 10px;
	}

	.tags {
		display: flex;
		margin-top: 10px;
	}

	.tag {
		font-size: 14px;
		color: #666;
		margin-right: 10px;
	}


	.footer {
		background-color: #eee;
		padding: 10px;
		position: fixed;
		/* 固定在底部 */
		bottom: 0;
		width: 100%;
		/* 充满整个宽度 */
		display: flex;
		justify-content: center;
	}

	.tabbar {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		/* 使 tabbar 充满宽度 */
		max-width: 600px;
		/* 可选: 设置最大宽度 */
	}

	.tabbar .action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 12px;
		color: #333;
		cursor: pointer;
	}

	.tabbar .icon-home,
	.tabbar .icon-mine {
		font-size: 24px;
		color: #333;
	}

	.floating-button {
		width: 60px;
		height: 60px;
		background-color: #6db87b;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 36px;
		cursor: pointer;
		margin-top: -30px;
		/* 调整按钮位置使其位于tabbar上方 */
	}

	.floating-button .text {
		color: #fff;
		font-size: 28px;
	}




















	.uni-mt-10 {
		//margin-top: 10px;
		background-color: white;
	}

	.uni-mt-5 {
		margin-top: 7px;
		margin-left: 14px;
	}

	.tag-view {
		margin-right: 10px;
		margin-left: 14px;
		margin-top: 10px;
		height: 50px;
		vertical-align: center;
	}

	.menu {
		background-color: white;
		height: 40px;
		vertical-align: center;
		border-radius: 10px;
	}

	.divider {
		background: #E0E3DA;
		width: 100%;
		height: 5rpx;
	}

	.demo-uni-col {
		height: 50px;
		border-radius: 3px;
		margin-left: 14px;
	}

	.image {
		height: 50px;
		width: 50px;
		margin-left: 14px;
	}

	.demo-uni-col1 {
		height: 50px;
		border-radius: 3px;

	}

	.dark {
		background-color: #d3dce6;
		vertical-align: center;

	}

	.spanname {
		width: 100px;
	}

	.a {
		margin-top: 5px;
	}

	.b {
		margin-top: 8px;
	}

	.menuitem {
		float: right;
		margin-bottom: 0px;
	}
</style>